<template>
	<div>
		<div class="container containerLog">
			<!-- 登录 -->
			<div class="logWarp">
				<h1 class="loginTit">牙姐姐 的博客</h1>
				<div class="loginCard">
					<div class="lrtitle"><h1>登录</h1></div>
					<el-form :model="logForm" status-icon :rules="logRul" ref="logForm" class="demo-ruleForm">
						<el-form-item prop="email">
							<el-input v-model.number="logForm.email" placeholder="邮箱"></el-input>
						</el-form-item>
						<el-form-item prop="pass">
							<el-input type="password" v-model="logForm.pass" placeholder="密码" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="loginEvent('logForm')">登录</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'Login',
		data(){ //  数据
			var logEmail = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('邮箱不能为空'));
				}
				setTimeout(() => {
					var emailReg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
					if (!emailReg.test(value)) {
						callback(new Error('请注意邮箱格式'));
					} else {
						callback();
					}
				}, 500);
			};
			var logPass = (rule, value, callback) => {
				if (value === '') {
					return callback(new Error('密码不能为空'));
				}
				setTimeout(() => {
					if (value.length != 8) {
						callback(new Error('密码长度为8'));
					} else {
						callback();
					}
				}, 500);
			};
			return {
				redirect:'',
				logForm: {
					email: '',
					pass: '',
				},
				logRul: {
					email: {validator: logEmail},
					pass: {validator: logPass}
				},
			}
		},
		created(){ 
			if(this.$route.query.hint){
				this.$notify.error({
					title: '进入后台请先登录'
				})
			}
		},
		mounted(){  },// console.log(this.$md5('BD123456'))
		methods:{ //事件处理器
			loginEvent(formName) { // 登录按钮
				this.$refs[formName].validate((valid) => {
					// console.log(this.logForm)
					if (valid) {
						this.$axios.post(this.HOST + '/api/login', {
							email: this.logForm.email,
							pass: this.$md5(this.logForm.pass)
						}).then(res=> {
							switch (res.data.err) {
								case 200:
									this.$notify({title: res.data.msg,type: 'success'})
									// 将token保存至localStorage中
									// window.localStorage.setItem('token',res.data.token);
									window.localStorage.setItem('name',res.data.name);
									window.localStorage.setItem('email',this.logForm.email);
									// 登陆成功跳转
									this.$router.push("/Backindex");
								break;
								case 201:
									this.$notify.error({
										title: res.data.msg,
										message: '请填写正确的邮箱或密码'
									})
								break;
							}
						}).catch(err => {
							console.log(err, ' catch ')
						})
					}
				})
			},
		},
	}
</script>

<style>
	.containerLog {
		width: 100%;
		height: 100vh;
		min-height: 390px;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.logWarp {
		max-width: 360px;
		min-width: 200px;
		width: 100%;
		min-height: 390px;
	}
	.loginTit {
		text-align: center;
		font-size: 26px;
		margin: 16px 0;
	}
	.loginCard {
		padding: 30px 42px;
		min-height: 200px;
		background-color: #fff;
		border-radius: 8px;
		padding-bottom: 48px;
		box-shadow: 0px 0px 4px 4px rgb(0 0 0 / 4%);
	}
	.loginCard .lrtitle {
		display: flex;
		position: relative;
		height: 36px;
		line-height: 32px;
		margin-bottom: 16px;
	}
	.loginCard .lrtitle h1 {
		font-size: 20px;
		color: #666;
		font-weight: bold;
		line-height: 0.7;
	}
	.loginCard .lrtitle p {
		font-size: 12px;
		color: #999;
		line-height: 16px;
		position: absolute;
		right: 0;
		top: 0;
	}
	.loginCard .lrtitle p a {
		color: #97dffd;
		margin-left: 6px;
	}
	.loginCard .el-alert {
		margin-top: -12px;
		margin-bottom: 8px;
	}
	.loginCard .el-button {
		width: 100%;
		background-color: #97dffd;
		border-color: #97dffd;
	}
	.loginCard .el-button--primary:focus,
	.loginCard .el-button--primary:hover {
		width: 100%;
		background-color: #97dffd;
		border-color: #97dffd;
	}
	.lrbtn {
		color: #fff;
		text-align: center;
		letter-spacing: 5px;
		padding: 8px;
		border-radius: 5px;
		cursor: pointer;
		margin-bottom: 30px;
	}
</style>
